<template>
  <div class="wrapper">
    <div class="title">
      <div class="box1"><i class="el-icon-document-copy"></i> &nbsp;&nbsp;值班信息</div>
      <div class="box2"></div>
    </div>

    <el-table :data="zhiBanTable" :show-header="false" :cell-style="cellStyle" class="table">
      <el-table-column prop="job" label="Right Aligned Column" align="right" ></el-table-column>
      <el-table-column prop="name" label="Left Aligned Column" align="left"></el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  name: "ZhiBanMsg",
  data() {
    return {
      cellStyle: {
        "border": 'none',
        'padding': '1px',
        'height': '16px',
        'white-space': 'nowrap'
      },
      zhiBanTable: [
        {job: '值班领导 :', name: '张三'},
        {job: '指挥长 :', name: '张三'},
        {job: '作战(安全)助理 :', name: '张三'},
        {job: '政工助理 :', name: '张三'},
        {job: '通信助理 :', name: '张三'},
        {job: '宣传助理 :', name: '张三'},
        {job: '保障助理 :', name: '张三'},
        {job: '驾驶员 :', name: '张三'},
        {job: '信息助理 :', name: '张三'},
        {job: '行政助理 :', name: '张三'},
        {job: '防火助理 :', name: '张三'},
        {job: '车管助理 :', name: '张三'},
      ]
    }
  }
}
</script>

<style scoped>
.el-table::before {
  height: 0;
}
.wrapper{
  /*border: 1px solid #bdbbbb;*/
}
.title {
  display: flex;
  border-bottom: 1px solid #b2b4b4;
}

.box1 {
  width: 50%;
  height: 40px;
  padding-left: 10px;
  font-size: 20px;
  color: whitesmoke;
  background-color: rgb(72, 157, 226);
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.box2 {
  width: 50%;
  height: 40px;
  background-color: #f8f7f7;
}

.table {
  font-size: 15px;

  color: rgb(14, 13, 13);
  white-space: normal;
  word-wrap: break-word;
}

.el-table tbody tr:hover > td {
  background-color: transparent !important;
}
</style>